<!DOCTYPE html>
<html lang="en" class="no-js" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorator="layout">
<head>
<title>配送区域管理</title>
</head>
<body>
<div layout:fragment="content">
	<div class="row">
		<div class="col-md-12">
			<div class="btn-group pull-right">
				<a href="index.html" th:href="@{/system/deliverarea/index/}" id="link_return" class="btn green">返回<i class="fa fa-arrow-circle-o-left"></i></a>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-md-12">
			<div class="form">
				<form role="form" id="form_deliverarea_edit"  th:action="@{/system/deliverarea/save}" th:object="${deliverArea}" method="post" class="form-horizontal">
                    <input type="hidden" th:field="*{id}" />
					<h4 class="form-section">配送区域信息</h4>
					<div class="form-body">
						<div class="form-group" th:class="${#fields.hasErrors('name')}? 'form-group has-error' : 'form-group'">
							<label class="control-label col-md-3">配送区域名称<span class="required" aria-required="true">* </span></label>
							<div class="col-md-4">
								<input type="text" id="text_name" class="form-control" placeholder="配送区域名称" th:field="*{name}" required=""/>
								<span class="help-block" th:if="${#fields.hasErrors('name')}" th:errors="*{name}"></span>
							</div>
						</div>
                        <div class="form-group" th:class="${#fields.hasErrors('description')}? 'form-group has-error' : 'form-group'">
                            <label class="control-label col-md-3">配送区域描述<span class="required" aria-required="true">*</span></label>
                            <div class="col-md-4">
                                <textarea id="textarea_description" cols="10" rows="5" class="form-control" placeholder="配送区域描述" th:field="*{description}"></textarea>
                                <span class="help-block" th:if="${#fields.hasErrors('description')}" th:errors="*{description}"></span>
                            </div>
                        </div>
                        <div class="form-group" th:class="${#fields.hasErrors('price')}? 'form-group has-error' : 'form-group'">
                            <label class="control-label col-md-3">费用<span class="required" aria-required="true">*</span></label>
                            <div class="col-md-4">
                                <input type="text" id="textarea_price" class="form-control" placeholder="费用" th:field="*{price}"/>
                                <span class="help-block" th:if="${#fields.hasErrors('price')}" th:errors="*{price}"></span>
                            </div>
                        </div>
                        <div class="form-group" th:class="${#fields.hasErrors('regionIdList')} ? 'form-group has-error' : 'form-group' ">
                            <label class="control-label col-md-3">所属区域<span class="required" aria-required="true">*</span></label>
                            <div class="col-md-8">
                                <div class="form-control-static">
                                    <div class="col-md-6" id="div_area">
                                        <div class="tagsinput border-striped">
                                            <span th:each="data : ${deliverArea.regionList}" class='badge badge-success'>
                                                <span th:text="${data.name}">&nbsp;&nbsp; </span>
                                                <a href='javascript:void(0);'>x</a>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-md-3 form-horizontal">
                                        <div class="text-center">
                                            <label class="btn btn-block green">请选择所属区域</label>
                                        </div>
                                        <select multiple="multiple" class="form-control success" name="provinceList" size="6" id="select_provinceList">
                                            <option th:each="province : ${provinceList}" th:value="${province.id}" th:text="${province.name}"></option>
                                        </select>
                                    </div>
                                    <div class="row">
                                        <span class="help-block" th:if="${#fields.hasErrors('regionIdList')}" th:errors="*{regionIdList}"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group" >
                            <label class="control-label col-md-3">是否过滤地区</label>
                            <div class="col-md-4">
                                <div class="radio-list">
                                    <label class="radio-inline"><span><input type="radio" id="radio_isFilterable_yes" value="1" th:field="*{filterable}" /></span>是</label>
                                    <label class="radio-inline"><span><input type="radio" id="radio_isFilterable_no" value="0"  th:field="*{filterable}"/></span>否</label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group" id="div_showfitlerarea" th:class="${#fields.hasErrors('filterRegionIdList')} ? 'form-group has-error' : 'form-group' ">
                            <label class="control-label col-md-3">过滤地区</label>
                            <div class="form-control-static">
                                <div class="col-md-4" id="div_showfilterinfo">
                                    <div class="tagsinput border-striped">
                                        <span th:each="data : ${deliverArea.filterViews}" class='badge badge-danger'>
                                                <span th:text="${data.key}"></span>
                                                <a href='javascript:void(0);'>x</a>
                                            <input type="hidden" th:value="${data.value}"/>
                                        </span>
                                        <!--<input type="hidden" th:each="data : ${deliverArea.filterRegionList}" th:value="${data.id}" />-->
                                    </div>
                                    <span class="help-block" th:if="${#fields.hasErrors('filterRegionIdList')}" th:errors="*{filterRegionIdList}"></span>
                                </div>
                            </div>
                        </div>
                        <div class="form-group" id="div_filterarea">
                            <label class="control-label col-md-3">请选择过滤地区</label>
                            <div class="row text-center">
                                <div class="col-md-2">
                                    <div class="text-center">
                                        <label class="btn btn-block red">省份</label>
                                    </div>
                                    <select class="form-control" th:field="*{regionIdList}" size="10"  id="select_regionIdList">
                                        <option th:each="data : ${deliverArea.regionList}" th:value="${data.id}" th:text="${data.name}"></option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <div class="text-center">
                                        <label class="btn btn-block red">城市</label>
                                    </div>
                                    <select class="form-control" name="cityList" size="10" id="select_cityList">

                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <div class="text-center">
                                        <label class="btn btn-block red">区县</label>
                                    </div>
                                    <select  class="form-control" name="countyList" size="10" id="select_countyList">

                                    </select>
                                </div>
                            </div>
                            <div class="row">&nbsp;</div>
                            <div class="col-md-offset-5 col-md-4">
                                <button type="button" id="btn_addfilterarea" class="btn green">添加选中的过滤地区</button>
                            </div>
                        </div>
					</div>
					<div class="form-actions fluid">
						<div class="col-md-offset-3 col-md-9">
							<button type="button" id="bt_submit" class="btn blue">提交</button>
						</div>
					</div>
				</form>		
			</div>
		</div>
	</div>
</div>	
</body>
</html>

<script th:inline="javascript">
    /*<![CDATA[*/
    $(document).ready(function(){

        checkShow();

        /**
         *检查过滤区域是否显示
         */
        function checkShow() {

            $("#div_filterarea").hide();

            if($("[name='filterable']:radio:checked").val() == 1) {
                $("#div_showfitlerarea").show();
                $("#div_filterarea").show();
            }else {
                $("#div_showfitlerarea").hide();
                $("#div_filterarea").hide();
            }
        }

        $("#div_area").append($(""));
        /**
         * 是否过滤添加事件 判断过滤区域是否显示
         */
        //$("input[name='filterable']").unbind("click");
        $("input[name='filterable']").bind("click",function(){
            checkShow();
        });

        /**
         * 选择区域列表添加事件
         * 1,删除列表中的项 2,添加所属区域标签 3,添加过滤省份中的项
         */
        $("#select_provinceList option").live("click",function(){

            $(this).remove();
            $(this).removeAttr("selected").appendTo($("#select_regionIdList"));

           //var $tags_len = $("#div_area .badge").size();
           // var i = Math.floor($tags_len/5);
           // if($tags_len%5 == 0) {
            //}
            $("#div_area .tagsinput:eq(0)").append($("<span class='badge badge-success'><span>" + $(this).text() + "&nbsp;&nbsp;</span><a href='javascript:void(0);'>x</a></span>&nbsp;"));
        });

        /**
         * 所属区域标签添加删除事件
         * 1,删除标签 2,删除过滤省份列表中的省份 3,清空过滤城市和过滤区县 4,添加的未选择的省份列表中的项 5,删除过滤地区标签
        */
        $("#div_area .tagsinput .badge a").live("click",function(){
            var provinceName = $(this).prev().text().trim();
            $(this).closest(".badge").remove();
            var $remove = $("#select_regionIdList option:contains('"+provinceName+"')").remove();
            $("#select_cityList").empty();
            $("#select_countyList").empty();
            $remove.removeAttr("selected").appendTo($("#select_provinceList"));
            $("#div_showfilterinfo .tagsinput:eq(0) span:contains("+$remove.text()+")").remove();
        });

        /**
         * 给过滤省份列表添加事件 ajax获取下一级数据
         */
        $("#select_regionIdList option").live("click",function(){
            var _parentId = $(this).val();
            $.ajax({
                url: '/system/deliverarea/searchRegion',
                type: 'post',
                data: {'parentId': _parentId},
                contentType: "application/x-www-form-urlencoded; charset=utf-8",
                error: function () {
                    alert('出错');
                },
                success: function (data) {
                    $("#select_cityList").empty();
                    $("#select_countyList").empty();
                    $.each(data, function (i, region) {
                        $("#select_cityList").append($("<option value='" + region.id + "'> " + region.name + "</option>"));
                    });
                }
            });
        });

        /**
         * 给过滤城市列表添加事件 ajax获取下一级数据
         */
        $("#select_cityList option").live("click", function () {
            var _parentId = $(this).val();
            $.ajax({
                url: '/system/deliverarea/searchRegion',
                type: 'post',
                data: {'parentId': _parentId},
                contentType: "application/x-www-form-urlencoded; charset=utf-8",
                error: function () {
                    alert('出错');
                },
                success: function (data) {
                    $("#select_countyList").empty();
                    $.each(data, function (i, region) {
                        $("#select_countyList").append($("<option value='" + region.id + "'>" + region.name + "</option>"));
                    });
                }
            });
        });

        /**
         * 给添加过滤地区按钮添加事件
         */
        $("#btn_addfilterarea").bind("click",function(){
            if($("#select_regionIdList option").size() != 0 && $("#select_regionIdList option:selected").size() == 0) {
                bootbox.alert("请选择过滤的省份");
            }else if ($("#select_cityList option").size() != 0 && $("#select_cityList option:selected").size() == 0 ) {
                bootbox.alert("请选择过滤的城市");
            }else {
                var $province = $("#select_regionIdList option:selected");
                var $city = $("#select_cityList option:selected");
                //默认过滤级别为城市
                var filterText = $province.text() + "  " + $city.text();
                var cityText = filterText;
                var $filterarea = $city;
                var $county = null;
                var filterLevel = 2;
                //如果过滤区县有选择 则过滤级别为区县
                if ($("#select_countyList option:selected").size() != 0) {
                    filterLevel = 3;
                    $county = $("#select_countyList option:selected");
                    $filterarea = $county;

                    filterText = filterText + "  " +$filterarea.text();
                }

                //判断是否为重复添加
                if($("#div_showfilterinfo .tagsinput:eq(0):contains("+cityText+")").size() > 0) {
                    if(filterLevel == 3) {
                        if ($("#div_showfilterinfo .tagsinput:eq(0):contains("+$county.text()+")").size() > 0) {
                            //过滤级别为3(区县),提示不能添加
                            bootbox.alert("不能重复添加过滤区域");
                        } else {
                            if ($("#div_showfilterinfo .tagsinput:eq(0) span span:contains(" + cityText + ")").text().trim() == cityText.trim()) {
                                bootbox.alert("已添加过此过滤区县的城市");
                            }else {
                                $("#div_showfilterinfo .tagsinput:eq(0)").append("<span class='badge badge-danger'><span>" + filterText + "&nbsp;&nbsp;</span><a href='javascript:void(0);'>x</a></span>")
                                        .append("<input type='hidden' value='" + $filterarea.val() + "'/>");
                            }
                        }
                    }else if(filterLevel == 2) {
                        //判断已经添加的城市 是否和 当前选择要添加的城市完全相等,如果相等提示不能重复添加,不相等(有此城市的区县被选择)则提示是否把区县数据替换为城市数据
                        if($("#div_showfilterinfo .tagsinput:eq(0) span span:contains(" + cityText + ")").text().trim() == filterText.trim()) {
                            bootbox.alert("不能重复添加过滤区域");
                        }else {
                            bootbox.confirm("已经过滤此城市的部分区县,过滤此城市会将此城市下的过滤区县删除,你确定要过滤此城市吗?", function (result) {
                                if (result) {
                                    $("#div_showfilterinfo .tagsinput:eq(0) span:contains(" + filterText + ")").remove();
                                    $("#div_showfilterinfo .tagsinput:eq(0)").append("<span class='badge badge-danger'><span>" + filterText + "&nbsp;&nbsp;</span><a href='javascript:void(0);'>x</a></span>")
                                            .append("<input type='hidden' value='" + $filterarea.val() + "'/>");
                                }
                            });
                        }
                    }
                }else {
                    $("#div_showfilterinfo .tagsinput:eq(0)").append("<span class='badge badge-danger'><span>" + filterText + "&nbsp;&nbsp;</span><a href='javascript:void(0);'>x</a></span>")
                            .append("<input type='hidden' value='" + $filterarea.val() + "'/>");

                }
            }
        });

        /**
         * 给过滤地区标签添加删除事件
         * 把当前标签删除
         */
        $("#div_showfilterinfo .tagsinput:eq(0) a").live("click",function() {
            $(this).parent().remove();
        });

        $("#bt_submit").click(function(){

            var filterIds = $("#div_showfilterinfo .tagsinput:eq(0) input:hidden")

            if($("input[name='filterable']:checked").val() == 1 && filterIds.size() == 0) {
                bootbox.alert("请选择过滤地区!");
            }else{
                for(var i=0; i<filterIds.size(); i++) {
                    $(filterIds[i]).attr("name","filterRegionIdList["+i+"]");
                }

                $("#select_regionIdList").attr("multiple", "multiple");

                $("#select_regionIdList option").each(function(){
                    $(this).attr("selected","selected");
                });

                $("#form_deliverarea_edit").submit();
            }

        });


        $("#form_deliverarea_edit").validate({
            rules:{
                name:{
                    required:true,
                    maxlength:250
                },
                description: {
                    required: true,
                    maxlength: 250
                },
                price: {
                    required: true,
                    number: true,
                    min:0,
                    max: 99999999.99
                }
            },
            messages:{
                name:{
                    required:"请输入配送区域名称",
                    maxlength:"最大不能超过100个字符"
                },
                description: {
                    required: "请输入配送区域描述",
                    maxlength: "最大不能超过255个字符"
                },
                price: {
                    required: "请输入费用",
                    number: "请输入正确的金额",
                    min:"费用不能小于0",
                    max: "费用不能大于99999999.99"
                }
            }
        });
    });

    /*]]>*/
</script>